<template>
    <div class="inputCom">
        <span class="label textColor">{{ label }}</span>
        <div class="iptbox ">
            <div class="areaCode" v-if="area" @click="selectArea">
                <!-- <span class="icon iti-flag" :class="icon"></span> -->
                <span class="textColor">+{{ dialCode }}</span>
                <img src="../../assets/image/login/more.png" alt="">
            </div>
            <input autocomplete="new-password" class="" v-if="typeText == 'password'" :type="passwordType"
                :placeholder="placeholderText" :value="value" @input="onInput" :disabled="disabled">
            <input class="" v-else type="text" :disabled="disabled" :placeholder="placeholderText"
                :value="value" @input="onInput">
            <div class="rightCon">
                <div class="closeBox" v-if="clearBtn" @click="clear"><img src="../../assets/image/login/clear.png" alt="">
                </div>
                <div class="eyeBox" v-if="typeText == 'password'" @click="changeType">
                    <img v-if="passwordType == 'password'" src="../../assets/image/login/_close.png" alt="">
                    <img v-else src="../../assets/image/login/open.png" alt="">
                </div>
            </div>
        </div>
        <div v-if="tips" class="tips">{{ tips }}</div>
    </div>
</template>

<script>
export default {
    props: {
        label: {
            type: String,
            default: ''
        },
        placeholderText: {
            type: String,
            default: ''
        },
        typeText: {
            type: String,
            default: 'text'
        },
        clearBtn: {
            type: Boolean,
            default: true
        },
        area: {
            type: Boolean,
            default: false
        },
        value: {
            type: [Number, String],
            default: 0,
        },
        tips: {
            type: String,
            default: ''
        },
        dialCode: {
            type: Number,
            default: 0
        },
        icon: {
            type: String,
            default: ''
        },
        disabled: {
            type: Boolean,
            default: false
        }
    },
    components: {

    },
    data() {
        return {
            passwordType: 'password'
        }
    },
    methods: {
        selectArea() {
            console.log(1);
            this.$emit('selectArea', true)
        },
        clear() {
            this.$emit('input', '')
        },
        onInput(e) {
            this.$emit('input', e.target.value)
        },
        changeType() {
            if (this.passwordType == "password") {
                this.passwordType = 'text'
            } else {
                this.passwordType = 'password'
            }

        }
    }
}
</script>

<style lang="scss" scoped>
.inputCom {
    color: #333;
    padding-bottom: 44px;

    .iptbox {
        height: 78px;
        margin-top: 18px;
        padding: 0 22px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-radius: 6px;
        border: 1px solid #E8E8E8;
    }

    .areaCode {
        width: 140px;
        display: flex;
        align-items: center;
        padding-left: 20px;
        justify-content: space-between;
        height: 100%;

        img {
            width: 20px;
        }
    }

    input {
        flex: 1;
        height: 100%;
        border: none;
        padding-left: 20px;

        @include themify() {
            color: themed("text_color");
        }
    }

    .rightCon {
        display: flex;
    }

    .closeBox,
    .eyeBox {
        width: 34px;
        height: 34px;

        img {
            width: 100%;
            height: 100%;
        }
    }

    .eyeBox {
        margin-left: 28px;
    }
}

.tips {
    font-size: 26px;
    color: #868D9A;
    margin-top: 18px;
}

input:-webkit-autofill {
    @include themify() {
        -webkit-box-shadow: 0 0 0 400px themed("input_background")inset;
    }

}

input::-webkit-input-placeholder {
    @include themify() {
        color: themed("text_color1");
    }
}

.icon {
    transform: scale(2);
    display: inline-block;
}
</style>